<template>
	<view class="search">
		<hx-navbar ref="hxnb" :config="config">
			<block slot="left">
				<view class="search-input flex" style="background-color: #F2F2F2;width:400rpx;">
					<!-- 	<text class="cuIcon-search" style="margin-left: 10rpx;"></text> -->
					<input @confirm="searchConfirm" :adjust-position="false" type="text" :placeholder="placeholderTitle"
						confirm-type="search" v-model="searchProjectName"></input>
				</view>

			</block>
			<block slot="right">
				<view class="flex" style="margin-right: 25rpx;">
				</view>
			</block>
		</hx-navbar>
		<!-- 	<view class="search-category flex">
			<view v-for="(item,i) of searchCategory" :key="i">
				<view class="sc-item flex flex-direction align-center"
				:class="{active: scActive == i}" @click="scActive = i">{{item.value}}</view>
			</view>
		</view> -->
		<view class="history" v-if="historyList && historyList.length">
			<view class="flex justify-between align-center">
				<text class="search-history">搜索历史</text>
				<image class="clear-history" src="/static/delete.png" @click="isShowModel = true"></image>
			</view>
			<view class="flex flex-wrap">
				<view class="hl-item" v-for="(item, i) of historyList" :key="i" @click="toSearchResult(item)">{{ item }}
				</view>
			</view>
		</view>
		<u-popup :show="isShowModel" mode="center" :round="14" @close="isShowModel = false">
			<view style="width: 600rpx; height: 298rpx; position: relative;" class="flex flex-direction">
				<text
					style="font-size: 34rpx; font-weight: 600; color: #191919; margin: 51rpx 0 26rpx; text-align: center;">清空历史</text>
				<text
					style="font-size: 26rpx; color: #191919; text-align: center;margin-left: 10rpx;">确定要清空历史记录吗？</text>
				<view class="flex"
					style="position: absolute; bottom: 0; width: 600rpx; height: 100rpx; flex-direction: row;">
					<view class="flex justify-center align-center" style="width: 300rpx; height: 100rpx;"
						@click="isShowModel = false">
						<text style="font-size: 32rpx; color: #191919;">取消</text>
					</view>
					<view class="flex justify-center align-center" @click="clearHistory"
						style="width: 300rpx; height: 100rpx; ">
						<text style="font-size: 32rpx; color: #FFCB99;">确认</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 标题栏配置
			config: {
				back: true,
				color: '#111111',
				leftSlot: true,
				centerSlot: true,
				rightSlot: true,
				backgroundColor: [1, '#FFFFFF']

			},
			uid: '',
			searchCategory: [{ name: 'gc', value: '工厂' }, { name: 'sj', value: '设计' }, { name: 'az', value: '安装' }, { name: 'xs', value: '销售' }, { name: 'px', value: '培训' }],
			current: 0,
			scActive: 0,
			// 搜索项目名称
			searchProjectName: '',
			historyList: null,
			isShowModel: false,
			placeholderTitle: '搜索名称或者关键字'
		}
	},
	methods: {
		// 用户点击搜索后执行
		searchConfirm(e) {
			this.searchProjectName = e.detail.value
			console.log(e.detail.value)
			// 为了onShow时，清空搜索框
			this.toSearchResult(e.detail.value);
		},
		clearHistory() {
			this.historyList = [];
			this.isShowModel = false;
		},
		toSearchResult(value) {
			setTimeout(() => {
				let index = this.historyList.indexOf(value);
				console.log(index)
				console.log(value)
				if (index == -1) {
					// 历史记录最高10条，否则依次顶掉
					if (this.historyList.length == 10) {
						this.historyList.splice(this.historyList.length - 1, 1);
					}
					this.historyList.unshift(value);
				} else {
					// 如果点击的是某个历史记录，提到最前方
					this.historyList.unshift(this.historyList[index]);
					this.historyList.splice(index + 1, 1);
				}
			}, 200)
		}
	},
	onShow() {
		this.historyList = [];
	},
	onLoad(e) {
	}
}
</script>

<style>
page {
	background-color: #F8F8F8;
}

.search .hx-navbar__content__main_search_input {
	width: 600rpx;
	height: 62rpx;
	line-height: 62rpx;
	background-color: #F2F2F2;
	border-radius: 31rpx;
	color: #9B9B9B;
	font-size: 13rpx;
	padding-left: 60rpx;
	margin-left: -30rpx;
}

.search .uni-input-placeholder {
	color: #9B9B9B !important;
	letter-spacing: 1rpx;
}

.search .hx-navbar__content__main_search_hxicon {
	/* top: 33rpx; left: 20rpx; */
	left: 20rpx;
	color: #9B9B9B !important;
}

.search .hx-navbar__icon {
	color: #464B55 !important;
}

.search .search-category {
	height: 52rpx;
	color: #111111;
	font-size: 28rpx;
	margin: 20rpx 0 0 32rpx;
}

.search .search-category>view+view {
	margin-left: 56rpx;
}

.search .sc-item.active::after {
	content: '';
	display: block;
	width: 40rpx;
	height: 6rpx;
	background-color: #FFCB99;
	border-radius: 3rpx;
	margin-top: 8rpx;
}

.search .step {
	display: block;
	width: 702rpx;
	height: 80rpx;
	margin: 23rpx auto 45rpx;
}

.search .history>view:first-child {
	margin: 20rpx 24rpx 0 32rpx;
}

.search .history>view:last-child {
	margin: 0 20rpx;
}

.search .search-history {
	font-size: 32rpx;
	color: #333333;
	font-weight: 700;
}

.search .clear-history {
	width: 32rpx;
	height: 32rpx;
}

.search .hl-item {
	font-size: 26rpx;
	color: #333333;
	padding: 10rpx 22rpx 9rpx;
	margin: 20rpx 12rpx 0 12rpx;
	border-radius: 31rpx;
	background-color: #FFFFFF;
	word-break: break-word;
}

.search .tabs {
	width: 448rpx;
	font-size: 28rpx;
}

.search-input {
	height: 62rpx;
	line-height: 62rpx;
	margin-right: 20rpx;
	display: flex;
	align-items: center;
	width: 100%;
	padding-left: 20rpx;
	margin-left: 24rpx;
	margin-right: 24rpx;
	border-top-left-radius: 50rpx;
	border-bottom-left-radius: 50rpx;
	border-top-right-radius: 50rpx;
	border-bottom-right-radius: 50rpx;
}

.cuIcon-search:before {
	content: "\e65c";
}
</style>

